<script lang="ts" setup>

import { inject, onMounted, ref, Ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { formatTimestamp } from '@/utils/format';
import { UserInfoAddDto } from '@/models/userinfo/UserInfoAddDto';
import { useUserStore } from '@/stores/useUserStore';
import { getUserInfo } from '@/api/userinfo/UserInfoApi';
let store = useUserStore();

const router = useRouter();
const route = useRoute();

var showNavbar = inject("showNavbar") as Ref<boolean>;
showNavbar.value = false;

const userAddForm = ref<any>();

const historyBack = () => {
    router.push({ path: "/" });
};

const userInfo = ref<UserInfoAddDto>(new UserInfoAddDto())
let id = store.getUserInfo?.id ?? "";
console.log("id =", id);
if (id) {
    onMounted(async () => {
        userInfo.value = await getUserInfo(id);
    });
}

</script>

<template>
    <van-nav-bar left-text="返回" title="添加用户" left-arrow @click-left="historyBack" />
    <van-form name="userForm" ref="userAddForm">
        <van-cell-group inset title="基本信息">
            <van-field name="userName" label="用户名" placeholder="用户名">
                <template #input>
                    {{ userInfo?.userName }}
                </template>
            </van-field>
            <van-field name="userName" label="注册时间" placeholder="用户名">
                <template #input>
                    {{ formatTimestamp(userInfo.createTime) }}
                </template>
            </van-field>
        </van-cell-group>

        <van-cell-group inset title="产品信息" class="product">
            <van-row class="plist-title" justify="space-between" align="center">
                <van-col :span="2"></van-col>
                <van-col :span="11">产品</van-col>
                <van-col :span="11">有效期</van-col>
            </van-row>
            <van-row v-for="(pitem, idx) in userInfo.products" class="plist-item" justify="space-between"
                align="center">
                <van-col :span="2">{{ (idx + 1) }}</van-col>
                <van-col :span="11">{{ pitem.productName }}</van-col>
                <van-col :span="11">{{ formatTimestamp(pitem.validTime) }}</van-col>
            </van-row>
        </van-cell-group>
    </van-form>

</template>

<style lang="scss" scoped>
.product {
    font-size: 18px;
    text-align: center;

    .plist-title {
        font-weight: bolder;
        margin: 10px;
        padding: 5px;
    }

    .plist-item {
        font-size: 16px;
        margin: 10px;
        padding: 5px;
        border-top: 1px solid #ededed;
    }
}
</style>